<template>
	<view>
		<view class="flex-col justify-start page">
			<view class="flex-col group_2">
				<view class="flex-row mt-21">
					<view class="flex-col shrink-0 section_2">
						<view :class="typeind == index ? 'leftitems' : 'leftitem'"
							v-for="(item,index) in mtdata.data.category" :key="index" @click="navtab(index)">
							<text>{{item.name}}</text>
						</view>
					</view>
					<view class="flex-row justify-between items-end group_3" style="position:fixed;top:0;right:15rpx; " >
						<view class="flex-row group_4"
							 >
							<view class="flex-col justify-start items-center button_1 ml-20-5  font_3"
								:class="type == key ? 'custom-class' : ''" v-for="(service, key) in services"
								:key="key" @click="topbat(key)">
								<text class=" text_6">{{ service.name }}  </text>
							</view>
						</view>
					</view>
					<scroll-view scroll-y="true" :scroll-into-view="toView" scroll-with-animation
						style="height:95vh;">
						<view class="flex-col flex-1 self-start group_5 ml-15"  >
					
							<view style="height:15px;">
							</view>
							<text class="self-start font_4 text_8"> {{mtdata.data.initial.name}}
								{{mtdata.data.initial.name.title}}</text>
							<view class="flex-row self-stretch group_6">
								<view class="flex-row"  @click="clstarting(0)" >
									<view v-if="Starting" class="shrink-0 section_3"></view>
									<image v-else class="shrink-0 image_4" src="/static/icon/xuanzx.png" />
									<text class="font_3 text_9 ml-9">工作日{{mtdata.data.initial.value.weekday}}元</text>
								</view>
								<view class="flex-row ml-29" @click="clstarting(1)">
									<view v-if="!Starting" class="shrink-0 section_3" ></view>
									<image v-else class="shrink-0 image_4" src="/static/icon/xuanzx.png" />
									<text class="font_3 text_10 ml-7">节假日{{mtdata.data.initial.value.holidays}}元</text>
								</view>
							</view>
							<view class="flex-col self-stretch group_1 group_8">
								<text class="self-start font_4 text_11">{{mtdata.data.kilometer.name}}
									{{mtdata.data.kilometer.title}} </text>
								<view class="flex-row justify-between input section_4 mt-14-5">
									<input type="number" v-model="mileage" placeholder="总里程数" @input="handleInput" />
									<text class="font_4 text_13">{{cost}}元</text>
								</view>
							</view>
							<view class="flex-col self-stretch group_9" v-for="(item,index) in mtdata.data.category"
								:id="'section' + index" :key="index"    >
								<text class="self-start font_4 text_15">{{item.name}}</text>
								<block v-for="(itm,idx) in item.goods" :key="idx">
									<text style="margin-top:14rpx; font-size: 28rpx;">{{itm.name}} </text>
									<view class="flex-row justify-between self-stretch group_1 mt-18-5"
										v-for="(it,ix) in itm.info" :key="ix">
										<view class="flex-row">
											<view class="flex-col items-start">
												<!-- <text class="font_4 text_17"> {{it.name}}</text> -->
												<image class="image_6 mt-15" :src="it.image" />
											</view>


											<view class="flex-col items-start self-start group_11 ml-10-5">
												<text class="font_4 text_18">{{it.name}}</text>
												<text class="mt-12 font_4">{{it.price}}{{it.unit}}</text>
											</view>
										</view>
										<view class="flex-row items-center self-start group_12">
											<view class="flex-col justify-start items-center image-wrapper">
												<!-- 大于0 -->
												<image v-if="it.num == 0" class="image_7"
													src="/static/icon/jianh.png" />
												<!-- 小于0 -->
												<image v-else @click="minus(index,idx,ix)" class="image_7"
													src="/static/icon/jianj.png" />

											</view>
											<view class="flex-col justify-start items-center image-wrapper"><text
													class="font"> {{it.num}}</text></view>
											<view class="flex-col justify-start items-center image-wrapper view">
												<image @click="add(index,idx,ix)" class="image_7"
													src="/static/icon/jiaj.png" />
											</view>

										</view>
									</view>

									<view class="self-stretch divider"></view>
								</block>
							</view>
							
						 
							<view style="height:150rpx;">

							</view>

						</view>

					</scroll-view>
				</view>

			</view>


		</view>




 
		<view class="bottom" >
			<view class="flex-row justify-between items-center section_6 pos_14">
				<view class="flex-col items-start">
					<view class="group_13">
						<text class="font_8 text_28">估算金额：</text>
						<text class="font_8 text_29">¥</text>
						<text class="font_7 text_27">{{pick}}</text>
					</view>
					<text class="mt-12 text_31">最终金额以上门报价为准</text>
				</view>
			<!-- 	<view class="flex-col justify-start items-center button_4 text-wrapper" >
					<text class="font_7 text_30"    @click="uentes"   >下一步</text>		
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
 
	import {
		info
	} from '@/utils/user.js'



	export default {

		data() {
			return {


				toView: "",

				typeind: 0,

				services: {},
				type: 'normal',
				normal: {},
				mtdata: {},

				Starting: false,
				// 起步价
				Startingpick: 0,
				// 公里费
				totalPrice: 0,
				// 总价
				cost: 0,




				mileage: '',

				orderid: '',
				pick: 0,

			};
		},
		onReady() {

		},
		onLoad() {


			this.instt()



		},

		onShow() {
			var _this = this

			uni.getStorage({
				key: 'orderid',
				success: function(res) {

					_this.orderid = res.data.id
					// _this.pick = res.data.pick

					console.log('接收到的参数:', res.data);
					// 处理参数
				}
			});


		},
		methods: {


			scrollToRightContent(index) {




				this.toView = "section" + index
			 


			},






			navtab(e) {
				this.typeind = e

				this.scrollToRightContent(e)
			},


			// 最后计算
			picks() {

				// 起步价
				var Starting = this.Startingpick
				// 公里费
				var totalPrice = this.totalPrice
				// 商品
				var cost = this.cost


				// 让以上几个数据相加等于 pick 
				// 	pick
				// 计算总和
				this.pick = Starting + totalPrice + cost;




			},


			// 计算购物车计算
			count() {
				const category = this.mtdata.data.category;
				let totalPrice = 0;

				for (const key in category) {
					if (category.hasOwnProperty(key)) {
						const goods = category[key].goods;
						for (let i = 0; i < goods.length; i++) {
							const info = goods[i].info;
							for (const x in info) {
								if (info.hasOwnProperty(x)) {
									const item = info[x];
									if (item.num !== 0) {
										// 执行价格计算
										const price = item.price; // 假设价格存在于 item 中
										totalPrice += item.num * price;
									}
								}
							}
						}
					}
				}
				this.totalPrice = totalPrice

				console.log("Total Price:", totalPrice);
				this.picks()
			},

			// add(e, i, x) {
			// 	console.log(e, i, x);
			// 	const category = this.mtdata.data.category;
			// 	if (category[e] && category[e].goods[i] && category[e].goods[i].info[x]) {
			// 		category[e].goods[i].info[x].num += 1;
			// 		console.log("Updated num:", category[e].goods[i].info[x].num);
			// 	}
			// }
			// 这个点击相加的方法,我想单独写一个方法,每次点击加减后调用这个方法,然后 计算 价格   这个新增的 num 是数量  和他同级的还有 price 是数量,我想遍历所有数据,只要是num不为0 的情况下,要当前这条数据做计算,然后循环相加





			// 加
			add(e, i, x) {
				console.log(e, i, x);
				const category = this.mtdata.data.category;
				if (category[e] && category[e].goods[i] && category[e].goods[i].info[x]) {
					category[e].goods[i].info[x].num += 1;
					console.log("Updated num:", category[e].goods[i].info[x].num);
				} else {
					console.log("Invalid parameters provided.");
				}
				// 计算购物车计算
				this.count()

			},
			// 减
			minus(e, i, x) {

				console.log(e, i, x);
				const category = this.mtdata.data.category;
				if (category[e] && category[e].goods[i] && category[e].goods[i].info[x]) {
					category[e].goods[i].info[x].num -= 1;
					console.log("Updated num:", category[e].goods[i].info[x].num);
				} else {
					console.log("Invalid parameters provided.");
				}
				// 计算购物车计算
				this.count()
			},


			handleInput(event) {
				// const value = event.detail.value;
				console.log('输入的值为:', value);

				const value = event.detail.value.trim(); // 移除字符串两端的空白字符

				const kilometers = parseFloat(value); // 将输入的值转换为数字

				if (value === '') {
					console.log('请输入公里数');
				} else if (isNaN(kilometers) || kilometers <= 0) {
					console.log('请输入有效的大于零的数字');
				} else {
					let cost = 0;
					if (kilometers > 10) {
						cost = (kilometers - 10) * 7; // 超出10公里，每公里7元
					}
					this.cost = cost
					console.log('公里数为:', kilometers);
					console.log('费用为:', cost, '元');
				}



				this.picks()


			},







			clstarting(e) {

				if (e == 0) {
					this.Starting = false
					// this.mtdata.data.initial.value.weekday
					this.Startingpick = this.mtdata.data.initial.value.weekday




				} else {
					this.Starting = true


					this.Startingpick = this.mtdata.data.initial.value.holidays


				}
				this.picks()
			},


			extractItemsWithNonZeroData(category) {
				const itemsWithNonZeroData = [];

				// 遍历所有分类
				for (const catKey in category) {
					const cat = category[catKey];

					// 遍历分类中的商品
					for (const goodsKey in cat.goods) {
						const goods = cat.goods[goodsKey];

						// 遍历商品信息
						for (const infoKey in goods.info) {
							const info = goods.info[infoKey];

							// 检查信息中的数量(num)属性是否不为零
							if (info.hasOwnProperty('num') && info.num !== 0) {
								// 将当前信息添加到结果数组中
								itemsWithNonZeroData.push(info);
							}
						}
					}
				}

				return itemsWithNonZeroData;
			},




			uentes() {


				// 使用示例
				const category = this.mtdata.data.category;
				const itemsWithNonZeroData = this.extractItemsWithNonZeroData(category);
				const jsonData = JSON.stringify(itemsWithNonZeroData, null, 2);


				var datlist = jsonData


				var data = {
					orderid: this.orderid,
					Startingpick: this.Startingpick,
					totalPrice: this.totalPrice,
					cost: this.cost,
					datlist: datlist
				}
				
				debugger
debugger


				uni.navigateTo({
					url: '/pages/Orderconfirmation/Orderconfirmation?data=' + JSON.stringify(data)
				})

			},

			instt() {
				info().then(res => {
					//
					this.services = res.data.data
				 
					// 总体源数据
					// var 	res.data.data.normal.category.push({name:"起步价"})
					this.mtdata = res.data.data.normal
					// mtdata.data.category
					this.clstarting(0)
				}).catch(error => {
					console.error('info 方法执行出错：', error);
				});
			},



			topbat(e) {
				console.log(e)
				this.type = e
				 

				this.mtdata = this.services[e]

				this.clstarting(0)
				this.count()
				this.$forceUpdate()



			},





			getLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						console.log('Current location:获取到了当前经纬度', res.longitude, res.latitude);
						// 将获取到的经纬度赋值给地图中心点
						this.longitude = res.longitude;
						this.latitude = res.latitude;
						// 添加标记点
						this.markers.push({
							id: 1,
							latitude: res.latitude,
							longitude: res.longitude,
							title: 'Current Location',
							iconPath: '/static/location.png', // 自定义标记图标
							width: 50,
							height: 50
						});
					},
					fail: (error) => {
						console.error('Failed to get location:', error);
					}
				});
			}
		}
	};
</script>
<style lang="less" scoped>
	.leftitem {
		line-height: 75rpx;
		text-align: center;
		font-size: 26rpx;
	}

	.leftitems {
		line-height: 75rpx;
		background-color: #ffffff;
		color: #2b8eff;
		text-align: center;
		font-size: 26rpx;
	}

	.custom-class {
		background-color: #2b8eff33 !important;
		color: #2b8eff !important;
	}

	.bottom {
		.section_6 {
			padding: 25rpx 32.7rpx 23rpx;
			background-color: #ffffff;
			border-bottom: solid 2rpx #f4f5f7;

			.group_13 {
				line-height: 26.72rpx;

				.font_8 {
					font-size: 24rpx;
					font-family: PingFang SC;
				}

				.text_28 {
					color: #666666;
					line-height: 20.38rpx;
				}

				.text_29 {
					color: #222222;
					line-height: 15.72rpx;
				}

				.text_27 {
					margin-left: 9.4rpx;
					color: #222222;
					line-height: 26.72rpx;
				}
			}

			.text_31 {
				color: #666666;
				font-size: 25rpx;
				font-family: PingFang SC;
				line-height: 18.56rpx;
			}

			.button_4 {
				margin-right: 11.3rpx;

				.text_30 {
					color: #ffffff;
					line-height: 33.52rpx;
				}
			}

			.text-wrapper {
				padding: 28.42rpx 0 28.08rpx;
				background-color: #2b8eff;
				border-radius: 8rpx;
				width: 240rpx;
				height: 90rpx;
			}

			.font_7 {
				font-size: 36rpx;
				font-family: PingFang SC;
			}
		}

		.pos_14 {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
		}



	}



	.ml-20-5 {
		margin-left: 41rpx;
	}

	.mt-21 {
		margin-top: 22rpx;
	}

	.ml-18-5 {
		margin-left: 37rpx;
	}

	.ml-6-5 {
		margin-left: 13rpx;
	}

	.mt-2-5 {
		margin-top: 5rpx;
	}

	.ml-19 {
		margin-left: 38rpx;
	}

	.ml-15 {
		margin-left: 30rpx;
	}

	.ml-9 {
		margin-left: 18rpx;
	}

	.ml-29 {
		margin-left: 58rpx;
	}

	.ml-7 {
		margin-left: 14rpx;
	}

	.mt-14-5 {
		margin-top: 29rpx;
	}

	.mt-18-5 {
		// margin-top: 37rpx;
	}

	.mt-15 {
		margin-top: 30rpx;
	}

	.ml-10-5 {
		margin-left: 21rpx;
	}

	.page {
		// padding-bottom: 283rpx;
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.group_2 {
			padding-top: 24rpx;
			overflow-y: auto;

			.group_3 {
				padding-left: 24.78rpx;
				padding-right: 22rpx;

				.font_2 {
					font-size: 24rpx;
					font-family: PingFang SC;
					line-height: 22.4rpx;
					color: #2b8eff;
				}

				.group_4 {
					margin-bottom: 2.62rpx;

					.button {
						padding: 15.16rpx 0 14.42rpx;
						background-color: #2b8eff33;
						border-radius: 36rpx;
						width: 148rpx;
						height: 52rpx;

						.text_5 {
							line-height: 22.42rpx;
						}
					}

					.button_1 {
						padding: 15.22rpx 0 14.64rpx;
						background-color: #f6f6f6;
						border-radius: 36rpx;
						width: 148rpx;
						height: 52rpx;

						.text_6 {
							line-height: 22.14rpx;
						}
					}

					.button_2 {
						padding: 15.32rpx 0 14.5rpx;
						background-color: #f6f6f6;
						border-radius: 36rpx;
						width: 148rpx;
						height: 52rpx;

						.text_7 {
							line-height: 22.18rpx;
						}
					}
				}
			}

			.section_2 {
				// padding: 42.28rpx 11.84rpx 79.34rpx 24.72rpx;
				background-color: #f4f5f7;
				// border-radius: 0rpx 24rpx 0 0;
				width: 170rpx;
				margin-top: -50rpx;
				// height: 1174rpx;

				.group_7 {
					margin-top: 77.6rpx;
				}

				.text_14 {
					margin-top: 77.6rpx;
					line-height: 22.1rpx;
				}

				.text_16 {
					margin-top: 77.94rpx;
					line-height: 22.12rpx;
				}

				.group_10 {
					margin-top: 75.2rpx;

					.font_6 {
						font-size: 24rpx;
						font-family: PingFang SC;
						line-height: 29rpx;
						color: #222222;
					}
				}

				.image_5 {
					width: 11rpx;
					height: 11rpx;
				}

				.text_20 {
					margin-top: 69.32rpx;
					line-height: 22.32rpx;
				}

				.text_21 {
					margin-top: 77.8rpx;
					line-height: 22.26rpx;
				}

				.text_22 {
					margin-top: 77.96rpx;
					line-height: 21.98rpx;
				}

				.text_24 {
					margin-top: 77.82rpx;
					line-height: 22.22rpx;
				}

				.text_26 {
					margin-top: 77.74rpx;
					line-height: 22.3rpx;
				}

				.group_19 {
					margin-top: 77.76rpx;
				}
			}

			.font_3 {
				font-size: 26rpx;
				font-family: PingFang SC;
				line-height: 22.4rpx;
				color: #222222;
			}

			.group_5 {
				margin-right: 23rpx;

				.font_4 {
					font-size: 26rpx;
					font-family: PingFang SC;
					line-height: 25.84rpx;
					color: #222222;
				}

				.text_8 {
					margin-left: 2.92rpx;
					line-height: 26.22rpx;
				}

				.group_6 {
					margin-top: 34.96rpx;
					padding: 0 2rpx;

					.section_3 {
						background-color: #ffffff;
						border-radius: 50%;
						width: 24rpx;
						height: 24rpx;
						border-left: solid 1rpx #d9d9d9;
						border-right: solid 1rpx #d9d9d9;
						border-top: solid 1rpx #d9d9d9;
						border-bottom: solid 1rpx #d9d9d9;
					}

					.text_9 {
						line-height: 22.22rpx;
					}

					.image_4 {
						width: 24rpx;
						height: 24rpx;
					}

					.text_10 {
						line-height: 22.32rpx;
					}
				}

				.group_1 {
					padding-left: 2rpx;

					.text_11 {
						line-height: 26.26rpx;
					}

					.input {
						align-self: stretch;

						.text_12 {
							color: #999999;
							line-height: 22.26rpx;
						}

						.text_13 {
							margin-right: 3.78rpx;
							color: #ff1101;
							line-height: 24.58rpx;
						}
					}

					.section_4 {
						padding: 16.38rpx 19.04rpx 17.04rpx;
						background-color: #ffffff;
						border-radius: 8rpx;
						border-left: solid 1rpx #d9d9d9;
						border-right: solid 1rpx #d9d9d9;
						border-top: solid 1rpx #d9d9d9;
						border-bottom: solid 1rpx #d9d9d9;

						display: flex;
						align-items: center;
					}

					.text_17 {
						line-height: 25.78rpx;
					}

					.group_11 {
						margin-top: 78.94rpx;

						.text_18 {
							line-height: 25.92rpx;
						}
					}

					.group_12 {
						margin-top: 90.02rpx;

						.view {
							margin-left: 4.16rpx;
						}
					}

					.view_2 {
						margin-left: 2.5rpx;
					}

					.group_17 {
						margin-left: 21.24rpx;

						.text_27 {
							line-height: 25.88rpx;
						}
					}

					.group_18 {
						margin-left: 39.64rpx;

						.view_4 {
							margin-left: 4.16rpx;
						}
					}
				}

				.group_8 {
					margin-top: 61.84rpx;

				}

				.group_9 {
					margin-top: 56.98rpx;

					.text_15 {
						margin-left: 3.2rpx;
						line-height: 26.12rpx;
					}

					.group_13 {
						margin-top: 34rpx;

						.group_14 {
							margin-left: 23.24rpx;

							.text_23 {
								line-height: 25.9rpx;
							}
						}

						.group_15 {
							margin-left: 39.24rpx;

							.view_3 {
								margin-left: 2.5rpx;
							}
						}
					}

					.divider {
						margin-right: 3rpx;
						margin-top: 45.5rpx;
						background-color: #f5f5f5;
						height: 1rpx;
					}

					.text_25 {
						margin-left: 3.38rpx;
						margin-top: 41.5rpx;
						line-height: 25.82rpx;
					}

					.group_16 {
						margin-top: 30.18rpx;
					}
				}

				.image_6 {
					width: 120rpx;
					height: 120rpx;
				}

				.image-wrapper {
					width: 52rpx;

					.image_7 {
						border-radius: 50%;
						width: 52rpx;
						height: 52rpx;
					}

					.font {
						font-size: 28rpx;
						font-family: PingFang SC;
						line-height: 20.38rpx;
						color: #000000;
					}

					.text_1 {
						line-height: 20.78rpx;
					}

					.text_35 {
						line-height: 20.78rpx;
					}
				}
			}

			.font_5 {
				font-size: 24rpx;
				font-family: PingFang SC;
				line-height: 22.4rpx;
				color: #666666;
			}
		}
	}
</style>